<template>
<div class="pm_bubble_menu_emoji" :editor="editor" v-show="isShow">
    <div class="emoji-panels">
        <div class="emoji-panel-labels">
            <span class="emoji-panel-label" v-for="({label},index) in emojis" :key="label" @click="gotoEmojiPanel(index)">{{label}}</span>
        </div>
        <div class="emoji-panel" v-for="({label,data},index) in emojis" :key="label" :id="'emoji_panel'+index">
            <span class="emoji-item" v-for="{text,id} in data" :key="text" @click="insertEmoji(id,text)">{{text}}</span>
        </div>
    </div>
</div>
</template>

<script>
// import {bm_emoji} from "../../../i18n.js"
import {
    getMarkAttributes
} from "@tiptap/core";
import emojis from "./emoji_data.js"
export default {
    name: 'bubble_menu_emoji',

    data() {
        return {
            // label:bm_emoji,
            isVisible: false,
            dialogHiddenCallback: () => {},
            dbody: window.document.body, //只在移动端使用
            emojis

        };
    },
    props: ["editor"],
    watch: {},
    mounted() {
        this.editor.toggleBubbleMenuEmoji = (callback) => {
            this.isVisible = !this.isVisible;
            this.dialogHiddenCallback = callback;
        };
    },
    beforeDestroy() {
        document.removeEventListener('click', this.handleDocumentClick);
    },
    beforeUnmount() {},
    computed: {
        isShow() {
            if (this.isVisible) {
                document.addEventListener('click', this.handleDocumentClick);
            } else {
                document.removeEventListener('click', this.handleDocumentClick);
            }
            return this.isVisible;
        },
    },
    methods: {
        handleDocumentClick(event) {
            // debugger
            if (!this.$el.contains(event.target) &&
                !document.getElementById('zeditoremojibtn').contains(event.target)
            ) {
                this.isVisible = false;
                this.dialogHiddenCallback();
            }
        },
        insertEmoji(id, text) {

            let node = {
                type: 'emoji',
                attrs: {
                    id,
                    text
                }
            }

            this.editor
                .chain().focus()
                .insertContent(node)
                .run();
        },
        gotoEmojiPanel(index){
            debugger
            const elementToScroll = document.getElementById('emoji_panel'+index);
            elementToScroll.scrollIntoView({ behavior: 'smooth' });
        }
    },
};
</script>

<style lang="scss" scoped>
.pm_bubble_menu_emoji {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    // border: 1px solid #ccc;
    padding: 10px;
    border-radius: 10px;
    background: linear-gradient(to bottom, #D5E5FD, #FBFDFF);
    padding: 20px;
    height: 50%;
    max-height: 50%;
}

.emoji-panels {
    height: 100%;
    overflow: scroll;
    background-color: #ffffff60;
    border-radius: 10px;
    padding: 10px;
}
.emoji-panel-labels{
    display: flex;
    gap: 20px;
    .emoji-panel-label {
        flex:1;
        background-color: #ffffff60;
        border-radius: 10px;
        text-align:center;
        color: #333;
        padding:4px 0;
    }

}
.emoji-panel {

    padding:10px 0 0 0;
    .emoji-item {
        margin: 10px;
        font-size: 32px;
    }
}
</style>
